<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/the-good-thing-of-wang-feizhai/vue_basic/js/vue.js"></script>
    <div id="root">
            <!-- 触发事件:v-on可以简写为@ -->
            <!-- 监听自定义事件 -->
        <cpn @item-click="cpnClick"></cpn>
    </div>

    <script type="text/x-template" id="cpnT"> 
          <div>
            <button v-for="item in categories" @click="btnClick(item)" >{{item.name}}</button>
            <p>内容1</p>
          </div>
    </script>

    <script>

        class Button{

        }

        const cpn = {
            template: "#cpnT",
            data(){
                return{
                    categories:[
                        {
                            id:'aaa',
                            name:'热门推荐'
                        },
                        {
                            id:'bbb',
                            name:'京东家电'
                        },
                        {
                            id:'ccc',
                            name:'进口好物'
                        },
                        {
                            id:'ddd',
                            name:'京东超市'
                        }
                    ]
                }
            },
            methods:{
                btnClick(item){
                    // 通过自定义事件 $emit函数 去主动传递事件,发射数据
                        // 需要触发的事件名称,参数
                    this.$emit('item-click',item)
                }
            },
            props:{
            }
        }


        new Vue({
            el:'#root',
            data(){
                return{
                    msg:'hello',
                    movies:['A','B','C']
                }
            },
            methods: {
                cpnClick(item){
                    console.log(item);
                }
            },
            components:{
                cpn
            }
        })
    </script>
</body>
</html>